class Check {
  constructor() {
    // //从localStorage取出数据
    this.list = JSON.parse(localStorage.getItem('cart')) || []
    //获取节点
    this.table = document.querySelector('table')
    this.tbody = document.querySelector('tbody')
    this.span = document.querySelector('.plice>span')
    this.selectall = document.querySelector('.selectall')
    //初始化
    this.init()
  }
  init() {
    this.render()
    this.bind()
    this.total()
    this.header_footer()
  }
  //头尾互用
  header_footer() {
    $('header').load('/html/header.html', () => {
      /**显示用户登录与商品数量 */
      function login() {
        let num = 0
        //取出数据用户数据
        let list = JSON.parse(localStorage.getItem('userkey')) || []
        //取出商品数据
        let lis = JSON.parse(localStorage.getItem('cart'))
        for (let i = 0; i < lis.length; i++) {
          num += lis[i].cart_number
        }
        if (list == '') {
          $('.cartt').html('请登录')
          $('.oidnum').html('0')
        } else {
          $('.cartt').html(list.name + '&nbsp;&nbsp;' + '欢迎你')

          $('.oidnum').html(num)
        }
        //一天清除数据
        setInterval(() => {
          localStorage.removeItem('userkey')
        }, 60000)
      }
      login()
    })
    $('footer').load('/html/footer.html')
  }
  //渲染数据
  render() {
    //首先判断购物车有没有数据
    if (!this.list.length) {
      this.tbody.innerHTML = `
         <tr height="100">
          <td colspan='8'>
          <h2>亲，你暂时还没有商品哟，现在去选购你心仪的商品吧！<a href="/index.html">GO</a></h2>
          </td>
         </tr>
         `
    } else {
      this.tbody.innerHTML = ''
      for (this.i = 0; this.i < this.list; this.i++) {
        console.log(this.i);
      }
      //改变this指向
      let _this = this
      this.list.forEach(function (item, index) {
        _this.tbody.innerHTML += `
          <tr>
             <td><input type="checkbox" class="select" data-id="${item.goods_id}" ${item.is_select && "checked"}></td>
             <td>${index+1}</td>
             <td class="tex"><p>${item.title}</p></td>
             <td><img src="${item.img_small_logo}" alt=""></td>
             <td>
                 <button class="sub" data-id="${item.goods_id}">-</button><input type="text" value="${item.cart_number}"><button class="add" data-id="${item.goods_id}">+</button>
             </td>
             <td>￥${item.price}</td>
             <td>￥${item.price * item.cart_number}</td>
             <td>
                 <p class="del" data-id="${item.goods_id}">删除</p>
             </td>
         </tr>
          `
      })
    }
    //数据可持续化
    localStorage.setItem('cart', JSON.stringify(this.list))
  }
  //操作数据，事件委托
  bind() {
    this.table.onclick = (e) => {
      e = e || window.event
      let target = e.target || e.srcElement
      //全选功能
      if (target.className == 'selectall') {
        //获取全选框的状态
        let type = target.checked
        //遍历循环数据
        this.list.forEach(item => {
          item.is_select = type
        })
        //重新渲染
        this.total()
        this.render()
      }

      //单选功能
      if (target.className == 'select') {
        //获取自定义id
        let id = target.dataset.id - 0
        //在数据中找到id相同的
        let goods = this.list.find(item => {
          return item.goods_id == id
        })
        //每个单选框的状态取至于他当前的反状态
        goods.is_select = !goods.is_select
        //重新渲染
        this.total()
        this.render()
      }

      //点击增加商品数量
      if (target.className == 'add') {
        //获取自定义id
        let id = target.dataset.id - 0
        //在数据中找到id相同的
        let goods = this.list.find(item => {
          return item.goods_id == id
        })
        goods.cart_number++
        //重新渲染
        this.total()
        this.render()
        this.header_footer()
      }

      //点击减少数量
      if (target.className == 'sub') {
        //获取自定义id
        let id = target.dataset.id - 0
        //在数据中找到id相同的
        let goods = this.list.find(item => {
          return item.goods_id == id
        })
        //设置最低数量为1
        if (goods.cart_number == 1) {
          return false
        }
        goods.cart_number--
        //重新渲染
        this.total()
        this.render()
        this.header_footer()
      }

      //点击删除商品
      if (target.className == 'del') {
        //获取自定义id
        let id = target.dataset.id - 0
        //在数据中找到id相同的
        let index = this.list.findIndex(item => {
          return item.goods_id == id
        })
        console.log(index);
        //直接把这个数据截取掉
        this.list.splice(index, 1)
        //重新渲染
        this.total()
        this.render()
        this.header_footer()
      }
    }
  }
  //计算总价和
  total() {
    //声明价格变量为零
    let price = 0
    this.list.forEach(item => {
      if (item.is_select == true) {
        price += Number((item.price * item.cart_number).toFixed(2))
        //  console.log(price);
        //筛选数据中所有的状态，全部为true返回
        let res = this.list.every(item => {
          return item.is_select == true
        })
        //如果全部为true则全选框就为true
        if (res) {
          this.selectall.checked = true
          //只要有一个不为true，则全选框状态为false
        } else {
          this.selectall.checked = false
        }
      }
    })
    this.span.innerHTML = price
  }
}
new Check()